<template>
  <div>   
    <mh></mh>   
    <main class="" id="main-collapse">
      <div>             
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas="this.datas"></bread>
        <!-- 声明表单 绑定错误提示 绑定规则 绑定数据 -->
              
        <Form
        ref="form"
        :showErrorTip="showErrorTip"
        :rules="rules"
        :model="model"
        >
          <FormItem label="用户名11" prop="username">
            <template v-slot:label>用户名</template>
            <input type="text" v-model="model.username">
          </FormItem>
          <FormItem label="密码"  prop="password">
            <input type="password" v-model="model.password">
          </FormItem>
          <FormItem label="确认密码" prop="password2">
            <input type="password" v-model="model.password2"/>
          </FormItem>
          <FormItem label="验证码" prop="code">
            <input type="text" v-model="model.code" /><img :src="src" @click="chageImgCode"/>
          </FormItem>
          <FormItem>
            <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
            <Button @click="reset">重置</Button>
          </FormItem>
        </Form>
                    
      </div>         
    </main>    
  </div>
</template>

<script>

  import mh from './mh.vue'
  // 导入面包屑导航组件
  import bread from './bread.vue'  
  export default {
    data () {
      return {
        msg: "这是一个变量",
        //进度条
        isLoading:false,
        //用户数据
        model:{
          username:'',
          password:'',
          password2:'',
          code:''
        },
        src:"http://localhost:8000/mycode/",
        //规则
        rules:{
          //非空验证
          required:['username','password','password2'],

          combineRules: [{
            refs: ['password', 'password2'],
            valid: {
              valid: 'equal',
              message: '两次输入的密码不一致'
            }
          }]
        },   
        //错误提示
        showErrorTip:true,
        //面包屑变量
        datas:[{'title':'首页',route:{name:'index'}},{title:'注册页面'}],   
      }
    },
    components: {
      'mh':mh,
      //声明标签
      'bread':bread
    },
    mounted:function(){
    
    },
    methods:{
      // 点击刷新验证码方法
      chageImgCode(){
        //生成随机字符
        let num = Math.ceil(Math.random()*10);
        this.src = this.src + "?code=" + num;

      },
      //提交
      submit(){
        //取值
        let username = this.model.username;
        let password = this.model.password;
        let password2 = this.model.password2;
        if (username=='') {
          this.$Message('用户名不能为空');
          return false;
        }

        // 请求后台接口
        // 定义一个传递变量
        var _this = this;
        this.axios.get('http://localhost:8000/register/',{
          // 设置参数
          params:{
            username:username,
            password:password,
            password2:password2,
            code:this.model.code
          }
        }).then(function(result){

          // 判断是否注册成功
          if(result.data.code==200){
            // 跳转页面
            _this.$router.push('/login');


          }else{
            //alert(result.data.message);
            // 组件式提醒
            // _this.$Notice(result.data.message);
            _this.$Message(result.data.message);
          }

        })
      },
      //重置
      reset(){
        this.$Confirm('确定重置？', '重置').then(() => {

        this.$Message.success('确定重置！');
          //1将内容置空
        this.model.username = '';
        this.model.password = '';
        this.model.password2 = '';

        }).catch(() => {
            this.$Message.error('取消');
        });

      }      
    }
  }
          
</script>

<style>

</style>